<script setup lang="ts">
import {onMounted, ref} from 'vue';
import { showToast as Toast } from 'vant';
import {useRoute, useRouter} from "vue-router";
import myAxios from "../plugins/myAxios.ts";


const route = useRoute();
const content = ref('');

const searchText = ref('');
const onSearch = () => {
  myAxios.post('/post/search', {
    searchText: searchText.value,
    pageNum: 1,
    pageSize:20
  }).then(res => {
    list.value = res.data.data;
    console.log(res.data);
  })
      .catch(err => {
        console.log(err);
        Toast('搜索失败');
      })

  content.value = searchText.value;
  myAxios.get('user/video/search', {
    params: {
      keyword: content.value,
    }
  })
      .then(res => {
        videoList.value = res.data.data;
        console.log(res.data);
      })
      .catch(err => {
        console.log(err);
        Toast('搜索失败');
      })
}

onMounted(() => {
  content.value = <string>route.query.content;
  searchText.value = content.value;
  myAxios.post('/post/search', {
    searchText: content.value,
    pageNum: 1,
    pageSize:20
  }).then(res => {
    list.value = res.data.data;
    console.log(res.data);

  })
      .catch(err => {
        console.log(err);
        Toast('搜索失败');
      })


  myAxios.get('user/video/search', {
    params: {
      keyword: content.value,
    }
    })
   .then(res => {
      videoList.value = res.data.data;
      console.log(res.data);
    })
   .catch(err => {
      console.log(err);
      Toast('搜索失败');
    })
})

const videoList = ref<{
  id: number;
  videoName: string;
  videoUrl: string;
}[]>([]); // 使用 ref 创建响应式变量

const list = ref<{
  id: number;
  title: string;
  content: string;
  thumbNum: number;
  favourNum: number;
  userId: number;
  createTime: string;
  updateTime: string;
}[]>([]); // 使用 ref 创建响应式变量

interface Item {
  // interface 改成 type 也行
  id: number;
}

const postDetails = (item: Item) => {
  router.push({
    path: '/search/details',
    query: {
      id: item.id
    }
  })
}
const videoDetails = (item: Item) => {

  router.push({
    path: '/topic',
    query: {
      id: item.id
    }
  })
}

const router = useRouter();
const onClickLeft = () => {
  router.push('/select')
}

const active = ref(0);

</script>

<template>
  <img src="../assets/最终返回键.png" class="back-btn1" alt="返回" @click="onClickLeft" />

  <form action="/">
    <van-search
        v-model="searchText"
        placeholder="请输入搜索关键词"
        @search="onSearch"
    />
  </form>
  <van-tabs v-model:active="active">
    <van-tab title="帖子">
      <van-card
          class="show-card"
          v-for="item in list"
          :title="item.title"
          :desc="item.content"
          @click="postDetails(item)"
      />
    </van-tab>
    <van-tab title="视频">
      <van-card
          class="show-card"
          v-for="item in videoList"
          :title="item.videoName"
          thumb="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/(CP9%5D%5BQNFT9QKH3M(R(KZH2.png"
          @click="videoDetails(item)"
      />
    </van-tab>
  </van-tabs>




</template>

<style scoped>
.back-btn1 {
  position:fixed;
  float: left;
  top: -1px;
  width: 40px;
  height: 55px;
  z-index:2;
}
</style>